import { Column } from '@ant-design/plots';

type BaseColumnType = {
  data: { type: string; value: number }[];
};

const BaseColumn = (props: BaseColumnType) => {
  const { data } = props;

  const config = {
    data,
    xField: 'type',
    yField: 'value',
    colorField: 'type',
    label: {
      text: () => {
        return '';
      },
      offset: 10,
    },
    tooltip: {
      field: 'value',
    },
    legend: false,
    axis: {
      x: {
        line: true,
        tick: true,
        lineLineWidth: 1,
      },
      y: {
        line: true,
        tick: true,
        grid: true,
        gridLineWidth: 1,
        gridStrokeOpacity: 0.8,
        lineLineWidth: 1,
        tickLineWidth: 1,
        gridFilter: (datum: any, index: number) => index !== 0,
      },
    },
  };
  return <Column {...config} />;
};

export default BaseColumn;
